import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 常见变换操作
 *    .scale() 缩放
 *    .translate() 平移
 *    .rotateX() 绕X轴旋转
 *    .rotateY() 绕Y轴旋转
 *    .rotateZ() 绕Z轴旋转
 * 这些方法都属于 Geometry 或 BufferGeometry 类型的实例，本质上是修改顶点坐标值
 */
let geometry = new THREE.BoxGeometry(100, 100, 100);

// 几何体变换
geometry.scale(2, 2, 2);
geometry.translate(50, 0, 0);
geometry.rotateX(Math.PI / 4);
// 居中：偏移的几何体居中
geometry.center();

let meshMaterial = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});
let lineMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
  linewidth: 4
});
let mesh = new THREE.Mesh(geometry, meshMaterial);
/**
 * 网格模型也可以进行变换操作，但与几何体不同的是，网格模型变换不会影响几何体坐标，而是改变模型的本地矩阵和世界矩阵
 */
mesh.scale.set(.5, 1.5, 2);
// 网格对象有一个特殊的旋转方法 rotateOnAxis(axis, deg) 让网格对象可以绕着指定向量旋转指定弧度
let axis = new THREE.Vector3(1, 1, 1);
mesh.rotateOnAxis(axis, Math.PI / 8);
let line = new THREE.Line(geometry, lineMaterial);
scene.add(mesh);
scene.add(line);

let ambientL = new THREE.AmbientLight(0x444444);
scene.add(ambientL);

let pointL = new THREE.PointLight(0xffffff);
pointL.position.set(400, 400, 0);
scene.add(pointL);

let k = innerWidth / innerHeight,
    s = 200,
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x888888);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

console.log('缩放后坐标：', geometry.vertices);